<template>
  <div id="os_detail">

    <el-descriptions title="服务器的信息"
                     direction="vertical"
                     :column="4"
                     :size="size"
                     border>
      <el-descriptions-item label="操作系统">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-windows"
               v-if="osInfo.type==='Windows_NT'"></use>
          <use xlink:href="#icon-lunix"
               v-else></use>
        </svg>
        {{osInfo.type}}
      </el-descriptions-item>
      <el-descriptions-item label="系统版本">{{osInfo.version}}</el-descriptions-item>
      <el-descriptions-item label="主机名">{{osInfo.hostname}}</el-descriptions-item>
      <el-descriptions-item label="CPU架构">{{osInfo.arch}}</el-descriptions-item>
      <el-descriptions-item label="操作系统的发行版本">
        {{osInfo.release}}
      </el-descriptions-item>
      <el-descriptions-item label="系统运行时长">{{(osInfo.uptime/3600).toFixed(2)}}小时
      </el-descriptions-item>
      <el-descriptions-item label="内存空间">
        <el-progress type="circle"
                     :color="customColorMethod"
                     :percentage="computRAM">
          <template #default="{ percentage }">
            {{percentage}}%
            <svg class="icon"
                 v-if="percentage >= 70 "
                 aria-hidden="true">
              <use xlink:href="#icon-weixian"></use>
            </svg>
          </template>
        </el-progress>
      </el-descriptions-item>
      <el-descriptions-item label="内存总容量">{{(osInfo.totalmem / 1073741824).toFixed(2)}}GB</el-descriptions-item>
      <!-- <el-descriptions-item label="CPU详细信息">
        <div v-for="(item,index) in osInfo.cpus"
             :key="index">
          0000
        </div>
      </el-descriptions-item> -->
      <!-- <el-descriptions-item label="内存总容量">{{osInfo.networkInterfaces.WLAN[1].address}}</el-descriptions-item> -->

      <el-descriptions-item label="磁盘信息"
                            align='center'>
        <el-progress type="dashboard"
                     v-for="item in osInfo.diskinfo"
                     :key="item.cidr"
                     :color="customColorMethod"
                     :percentage="Number((item.capacity).substring(0,item.capacity.length-1))">
          <template #default="{ percentage }">
            <div class="percentage-label">{{item.mounted}}</div>
            <div class="percentage-value">{{ percentage }}%</div>
            <!-- 如果占用超过 70% 显示红色感叹号 -->
            <svg class="icon"
                 v-if="percentage >= 70 "
                 aria-hidden="true">
              <use xlink:href="#icon-weixian"></use>
            </svg>
          </template>
        </el-progress>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, computed } from "vue";
import { getOsDetail } from "@/api/os_info.js"
export default defineComponent({
  setup() {
    const osInfo = ref({})
    // 获取服务器的信息
    const queryOsDetail = () => {
      try {
        getOsDetail().then(res => {
          if (res && res.status == '0') {
            osInfo.value = res.osInfo
            console.log(osInfo);
          } else {

          }
        })
      } catch (err) {
        console.log(err);
      }
    }
    queryOsDetail()
    // 计算内存的百分比
    const computRAM = computed(() => {
      return ((1 - (osInfo.value.freemem / osInfo.value.totalmem)) * 100).toFixed(2)
    })
    // 计算磁盘占用空间的进度条的颜色
    const customColorMethod = (percentage) => {
      if (percentage < 30) {
        return '#67c23a'
      }
      if (percentage < 70) {
        return '#e6a23c'
      }
      return '#f56c6c'
    }
    // 获取CPU的全名
    const getCpuInfo = () => {
      // console.log(osInfo.value.cpus[0]);
      // return osInfo.value.cpus[0].model
    }
    return { queryOsDetail, osInfo, computRAM, customColorMethod, getCpuInfo };
  },
});
</script>

<style scoped lang="less">
.disk_info {
  display: flex;
  justify-content: center;
}
</style>